<template>
	<view class="record-box">
		<view v-for="itm in 9" :style="{height:(4 + voiceRate * (7 - Math.abs(5 - itm)) * (8 - Math.abs(5 - itm)))+'rpx'}" class="record-itm"></view>
	</view>
</template>

<script>
	export default {
		name:"rm-record",
		data() {
			return {
				rate: 1
			};
		},
		props:['voiceRate']
	}
</script>

<style>
.record-box {
	margin: 0 auto;
	width: 160rpx;
	height: 80rpx;
	background-color: rgba(0,0,0,0.1);
	border-radius: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6rpx;
	position: absolute;
	top: -40rpx;
	left: calc(50% - 80rpx);
}
.record-itm {
	width: 4rpx;
	background: #ffffff;
}
</style>